<template>
	<view class="financial">
		<view class="financial-plate-1">
			<view class="page-title">
				财务中心
			</view>
			<view class="price-box">
				<view class="price-left">
					<text>账户余额</text>
					<view class="price-num">
						<text>￥</text>
						<text>8,609.00</text>
					</view>
				</view>
				<navigator url="extract/extract" hover-class="none" open-type="navigate">
					<view class="peice-right">
						提现>
					</view>
				</navigator>

			</view>
		</view>
		<view class="financial-plate-2">
			<view class="title">
				奖金记录
			</view>
			<view class="content">
				<view class="item" v-for="(item,index) in 3" :key="index">
					<view class="item-left">
						<view class="item-icon">
							<image src="../../static/img/financial/shop-icon.png" mode="widthFix"></image>
						</view>
						<view class="item-txt">
								<text>门店办理会员卡</text>
								<text>今天 12:33:13</text>
						</view>
					</view>
					<view class="item-right">
						<u-icon name="plus" color="#F9800C" size="17"></u-icon>
						<text>69.00</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
.financial{
	width: 100vw;
	height: 100vh;
	background-color: $bg-color;
	.financial-plate-1{
		width: 750rpx;
		height: 388rpx;
		background-image: url(../../static/img/financial/financial-top-bg.png);
		background-size: 100% 100%;
		padding-top: calc(var(--status-bar-height) + 20rpx);
		.page-title{
			font-size: 32rpx;
			font-weight: 700;
			color: #ffffff;
			margin-bottom: 95rpx;
			width: 100%;
			text-align: center;
		}
		.price-box{
			padding: 0 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.price-left{
				>text{
					font-size: 28rpx;
					font-weight: 400;
					color: #ffffff;
					margin-bottom: 15rpx;
				}
				.price-num{
					font-family: priceFont;
					text:first-child{
						font-size: 28rpx;
						font-weight: 700;
						color: #ffffff;
					}
					text:last-child{
						font-size: 64rpx;
						color: #fff;
						font-weight: 700;
					}
				}
			}
			.peice-right{
				width: 140rpx;
				height: 60rpx;
				border: 1px solid #ffffff;
				border-radius: 10rpx;
				line-height: 60rpx;
				text-align: center;
				font-size: 30rpx;
				color: #ffffff;
			}
		}
	}
	.financial-plate-2{
		padding: 50rpx;
		.title{
			font-size: 36rpx;
			font-weight: 700;
			color: #19284e;
			margin-bottom: 30rpx;
		}
		.content{
			.item{
				width: 650rpx;
				height: 180rpx;
				background: #ffffff;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				padding: 30rpx;
				justify-content: space-between;
				margin-bottom: 30rpx;
				.item-left{
					display: flex;
					.item-icon{
						margin-right: 30rpx;
						image{
							width: 36rpx;
							margin-top: 10rpx;
						}
					}
					.item-txt{
						display: flex;
						flex-direction: column;
						text:first-child{
							font-size: 30rpx;
							font-weight: 700;
							color: #111111;
							margin-bottom: 15rpx;
						}
						text:last-child{
							font-size: 24rpx;
							font-weight: 500;
							color: #999999;
						}
					}
				}
				.item-right{
					display: flex;
					align-items: center;
					justify-content: center;
					text{
						margin-left: 15rpx;
						font-size: 32rpx;
						font-weight: 700;
						color: #2c2c2c;
					}
				}
			}
		}
	}
}
</style>
